<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手写签名</title>
</head>

<body style="margin: 0;">
  <canvas id="cvs" style="background-color:#eee;"></canvas>
  <script>
    const cvs = document.getElementById('cvs')
    cvs.width = document.documentElement.clientWidth
    cvs.height = document.documentElement.clientHeight
    const ctx = cvs.getContext('2d')
    let isDrawing = false
    cvs.addEventListener('mousedown', e => {
      isDrawing = true
      ctx.moveTo(e.pageX, e.pageY)
    })
    cvs.addEventListener('mousemove', e => {
      if (isDrawing) {
        ctx.lineWidth = 10
        ctx.lineTo(e.pageX, e.pageY)
        ctx.stroke()
      }
    })
    cvs.addEventListener('mouseup', e => {
      isDrawing = false
    })
  </script>
</body>

</html>